import React, {PureComponent } from 'react';
import './index.less';
import { Carousel, WingBlank, Icon, Button } from 'antd-mobile';
import connect from '@/connect.js'
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let moneyKeyboardWrapProps;
if (isIPhone) {
    moneyKeyboardWrapProps = {
        onTouchStart: e => e.preventDefault()
    };
}
@connect
class dropDownForm extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            dataQuestion: [
                {
                    question: '这个椅子是可以组合的吗？',
                    number: '12',
                },
                {
                    question: '沙发质量怎么样，材质舒服吗？',
                    number: '8',
                },
                {
                    question: '设计带有一股特别的力量，操控着人体感知力联结意想世界',
                    number: '6',
                },
            ],
            dataPic: [
                {
                    design: '设计带有一股特别的力量，操控着人体感知力联结意想世界',
                    admin: '詹麟翾',
                    picTou: 'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E',
                    commodity: 'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E',
                    thumbs: '1530',
                    look: '21000',
                },
                {
                    design: '猥琐男',
                    admin: '孙长杰',
                    picTou: 'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E',
                    commodity: 'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E',
                    thumbs: '150',
                    look: '200',
                },
                {
                    design: '干饭人',
                    admin: '庞皓文',
                    picTou: 'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E',
                    commodity: 'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E',
                    thumbs: '1530',
                    look: '21000',
                },
            ]
          }    
        }
        componentDidMount() {
          }
    render() {
        return (
            <div className="asking">
                        <div className="product">
                <div className="product-number">
                <span className="product-numberCode">大家都在问</span>
                </div>
                <div className="product-more">
                <span>更多（{this.state.dataQuestion.length}条）</span>
                <Icon size={'md'} color={'#999999'} type={'right'} />
                </div>
            </div>
            <div className="question">
            {
                this.state.dataQuestion.slice(0,2).map((val,index) =>{
                    return <div style={{marginTop: index === 0 ? '0px' : '10px'}} className="ask-all">
                        <div className="ask-pic">问</div>
                        <span className="ask-question">{val.question}</span>
                        <span className="ask-number">{val.number || 0}个回答</span>
                    </div>
                })
            }
            </div>
            {/* 分割线 */}
            <div className="dividing-line"></div>
            <div className="dividing">
                <div className="dividing-number">
                <span className="dividing-numberCode">包含此商品的干货文章</span>
                </div>
                <div className="dividing-more">
                <span>更多（{this.state.dataQuestion.length}条）</span>
                <Icon size={'md'} color={'#999999'} type={'right'} />
                </div>
            </div>
            {
                this.state.dataPic.slice(0,1).map((val, index) => {
                    return <div className="dividing-details">
                    <div style={{float: 'left'}}>
                    <div className="dividing-design">
                        {val.design}
                        </div>
                        <div className="dividing-people">
                        <img className="dividing-picTou" src={val.picTou}></img>
                        <span className="dividing-admin">{val.admin}</span>
                        <span className="dividing-look">眼睛 {val.look}</span>
                        <span className="dividing-thumbs">星号 {val.thumbs}</span>
                            </div>
                            </div>
                            <img className="dividing-commodity" src={val.commodity}>
                                </img>
                    </div>
        
                })
            }
                  </div>
        );
    }
}
export default dropDownForm